import React, { useEffect, useState } from 'react'
import { NavBar, Tabs } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export default function Mycollection() {
    let navigate = useNavigate()
    useEffect(() => {
        getlist()
        getlist1()
    }, [])
    const [list1,setlist1]=useState([])
    const [list, setlist] = useState([])
    const getlist = async () => {
        let { data } = await axios.get('http://localhost:3000/getlist')
        let datalist = data.list.filter(i => i.collect == true)
        setlist(datalist)
    }
    const getlist1=async()=>{
        let {data}=await axios.get('http://localhost:3000/getrun')
        let datalist = data.list.filter(i => i.collect == true)
        setlist1(datalist)
      }
    return (
        <div>
            <NavBar onBack={() => { navigate(-1) }}>我的收藏</NavBar>
            <div style={{ backgroundColor: 'rgb(247,247,247)' ,width: '100%', height: "calc(100vh - 45px)"}}>
                <Tabs>
                    <Tabs.Tab style={{ backgroundColor: 'white' }} title='动态' key='fruits'>
                        <div style={{ width: '100%', height: "calc(100vh - 112px)" }}>
                            {list.map(item => {
                                return <div key={item._id} onClick={() => {
                                    navigate(`/app/dan/${item._id}`)
                                }} style={{
                                    width: '38%', height: '230px', display: 'inline-block', margin: '15px'
                                    , backgroundColor: 'white', paddingBottom: "5px", paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px'

                                }}>
                                    <p ><img src={item.img} style={{ width: '100%', borderTopLeftRadius: '10px', borderTopRightRadius: '10px', height: '100%' }}></img></p>
                                    <p>{item.test}</p>
                                    <p style={{ marginTop: '16px' }}>
                                        <img src={item.img} style={{ width: '20px', float: 'left', height: '20px', borderRadius: '50%' }}></img>
                                        <span>{item.name}</span>
                                        <span style={{ float: 'right' }}>{item.praisenum}{item.praise ? "👍" :
                                            <img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E5%8A%A8%E6%80%81%E8%AF%A6%E6%83%85/u332.svg'></img>
                                        }</span>
                                    </p>

                                </div>
                            })}
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab style={{ backgroundColor: 'white' }} title='一起跑' key='vegetables'>
                        {list1.map(item => {
                            return <div style={{ marginTop: '10px' }}>
                                <div style={{
                                    width: '360px', borderRadius: '10px', height: '200px', position: 'relative', backgroundRepeat: 'no-repeat',
                                    backgroundImage: "url(" + item.img + ")", backgroundSize: '100% 100%'
                                    , marginLeft: '7px'
                                }}>
                                    <span style={{
                                        backgroundColor: 'rgb(236,128,141)', borderRadius: '5px'

                                        , color: 'white', padding: '5px', right: '0px', position: 'absolute'
                                    }}>约炮中</span>
                                </div>

                                <div style={{ marginLeft: '7px' }}>
                                    <p style={{ fontWeight: 'bold' }}>{item.test}</p>
                                    <p style={{ color: 'gray', fontSize: '13px' }}>{item.name} 来自:{item.address}</p>
                                </div>
                            </div>
                        })}
                    </Tabs.Tab>
                </Tabs>
            </div>
        </div>
    )
}